<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/start.css">
    <link rel="stylesheet" href="../css/login.css">
</head>
<body>
    <div class="nav">
        <img src="../img/logo.png" alt="">
        <span class="title">TQ02博客系统</span>
        <span class="spacer"></span>
        <a href="start.html">主页</a>
    </div>

    <div class="login-container">
        <div class="login-dialog">
<!--       <form method="post" action="../user" >      -->

            <h1>博客登陆</h1>
            <div class="kk">
                用户名：<input type="text" id="username" name="username">
            </div>
            <div class="kk">
                密码：&nbsp;&nbsp;&nbsp;<input type="password" id="password" name="password">
            </div>
            <div class="cc">
                <span style="margin-left: 80px;">验证码：</span>
                <input type="text" id="passwordes" name="code-password" style="width: 80px; " >
                <span style="margin-left: 20px;"><input type="submit" value="" id="code"  style="width: 80px;" onclick="getCode()"></span>
            </div>
          
            <div class="row">
                <input type="submit" id="submit" value="登录" >
            </div>

        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
            <script>
                    function getCode(){
                        var chars = ['0','1','2','3','4','5','6','7','8','9',
                            'A','B','C','D','E','F','G','H','I','J','K','L','M',
                            'N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
                        var res = "";
                        for(var i=0;i<5;i++){
                            var id = Math.floor(Math.random()*36);
                            res += chars[id];
                        }
                        document.getElementById('code').value=res;
                    } getCode();


                        $("#submit").click(function (){
                            let userId = $("#username").val();
                            let password = $("#password").val();
                            let code = $("#passwordes").val();
                            let code1 = $("#code").val();
                            if (userId == null || userId == "") {
                                alert("请输入账号");
                                return false;
                            }
                            if (password == null || password == "") {
                                alert("请输入密码");
                                return false;
                            }
                            if (code != code1) {
                                getCode();
                                alert("验证码错误");
                                return false;
                            }
                            $.ajax({
                                url: "../user",
                                data: {
                                   'username': userId,
                                    'password': password
                                },
                                type: "post",
                                success:function (body)
                                {
                                    if(body.massage==1){
                                        alert("密码或者验证码错误");
                                    }else{
                                        window.location.href='list.html';
                                    }
                                }
                            })
                        })

            </script>
    </body>
</html>